<template xmlns:>
    <div>
        <div>
            <van-popup
                    :show="show_grade"
                    position="bottom"
                    @close="onClose"
            >
                <van-picker :columns="columns" @change="onChange" />
            </van-popup>
        </div>
        <div class="ex_img">
            <img src="/static/images/exam.jpg" alt="">
        </div>
        <div><button class="select_grade" @click="onshow_grade">{{value[0]}}{{value[1]}}</button></div>
        <div>
            <ListPractise v-for="(item, index) in test"
                      :key="index"
                      :test="item"
                      :index="index"
            />
        </div>
    </div>
</template>

<script>
  import ListPractise from '@/components/list_practise.vue'
  import ExamListApi from '@/api/examList'

  const citys = {
    '一年级': ['语文', '数学', '英语'],
    '二年级': ['语文', '数学', '英语'],
    '三年级': ['语文', '数学', '英语'],
    '四年级': ['语文', '数学', '英语'],
    '五年级': ['语文', '数学', '英语'],
    '六年级': ['语文', '数学', '英语'],
    '初一': ['语文', '数学', '英语', '政治', '历史', '地理', '生物'],
    '初二': ['语文', '数学', '英语', '政治', '历史', '地理', '物理', '生物'],
    '初三': ['语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物']
  }
  export default {
    name: 'practiseList',
    data () {
      return {
        show_grade: false,
        columns: [
          {
            values: Object.keys(citys),
            className: 'column1'
          },
          {
            values: citys['一年级'],
            className: 'column2',
            defaultIndex: 4
          }
        ],
        test: [],
        index: '0',
        picker: '',
        value: ['请选择年级科目'],
        last_city: '一年级',
        grade: '请选择年级科目'
      }
    },
    mounted () {
      var type = '练习'
      ExamListApi.getExamList(type)
        .then((resp) => {
          console.log(resp)
          console.log(resp[0])
          this.test = resp
          this.$store.dispatch('getList', this.test)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    methods: {
      onshow () {
        this.show = true
      },
      onshow_grade () {
        this.show_grade = true
      },
      onClose () {
        this.show = false
        this.show_grade = false
      },
      sure (event) {
        this.onClose()
      },
      onChange (event) {
        console.log(event)
        this.value = event.mp.detail.value
        console.log(this.value)
        // eslint-disable-next-line eqeqeq
        if (this.value[0] != this.last_city) {
          this.columns[1].values = citys[this.value[0]]
          this.value[1] = citys[this.value[0]][0]
        }
        this.last_city = this.value[0]
      }
    },
    components: {ListPractise}
  }
</script>

<style scoped>
    .ex_img{
        text-align: center;
        vertical-align: middle;
        border-bottom: 1rpx solid #eee;
    }
    .ex_img img{
        width: 200rpx;
        height: 178rpx;
    }
    .select_grade{
        height: 80rpx;
        width: 400rpx;
        border-color: #1dee1b;
        border: 1rpx solid rgba(238, 238, 238, 0.51);
        color: #000000;
    }
</style>

